<template>
  <div id="app">
    <transition :name="switchTransition">
      <router-view/>
    </transition>
    <bar></bar>
  </div>
</template>

<script>
// import Loading from '@/base/loading/loading';
import Bar from "base/bar/bar";

export default {
  name: "App",
  components: { Bar },
  data() {
    return {
      switchTransition: "onefade"
    };
  },
  watch: {
    $route(to, from) {
      const isBack = this.$router.isBack;
      if (from.meta.leavel && to.meta.leavel) {
        // 说明是一级到一级
        this.switchTransition = "onefade";
      } else if (!to.meta.leavel) {
        // 说明到的是二级
        this.switchTransition = "twofade";
      }
      if (isBack) {
        this.switchTransition = "threefade";
      }
      this.$router.isBack = false;
    }
  },
  mounted() {
    // 监听
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
    var u = navigator.userAgent;
    var flag;
    var myFunction;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isIOS) {
      let flag = false;
      let pageBackNormFunc;
      // 聚焦后，键盘弹起
      document.body.addEventListener("focusin", () => {
        flag = true;
        pageBackNormFunc && clearTimeout(pageBackNormFunc);
      });
      // 失焦后，键盘关闭
      document.body.addEventListener("focusout", () => {
        if (flag) {
          // 页面滚动回原来的位置
          pageBackNormFunc = setTimeout(() => {
            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
          }, 200);
        }
        flag = false;
      });
    } else {
      return;
    }
  },
  methods: {
    goBack() {
      if(!this.$route.meta.leavel){
        this.$router.isBack = true;
      }
    }
  },
  destroyed(){
     window.removeEventListener('popstate', this.goBack, false);
  }
};
</script>

<style lang="scss" scoped>
@import "~common/scss/var.scss";
#app {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.onefade-enter {
  opacity: 0;
}
.onefade-enter-active,
.onefade-leave-active {
  transition: all 0.5s;
}
.onefade-leave-to {
  opacity: 0;
}

.twofade-enter {
  position: absolute;
  transform: translateX(100%);
}
.twofade-enter-active {
  transition: all 0.5s;
}
.twofade-leave-active {
  transition: all 0;
  transition-delay: 0.5s;
}
.twofade-leave-to {
  position: absolute;
  width: 100%;
  z-index: -10;
  transform: translateX(-100%);
}

.threefade-enter {
  position: absolute;
  transform: translateX(-100%);
}
.threefade-enter-active {
  transition: all 0s;
}
.threefade-leave-active {
  transition: all 0.5s;
}
.threefade-leave-to {
  position: fixed;
  width: 100%;
  z-index: 11;
  transform: translateX(100%);
}
// .route-enter {
//   opacity: 0.2;
//   // transform: translate3d(0, 0, 0);
// }
// .route-enter-active {
//   transition: $transitionFast;
// }
// .route-leave-active {
//   transition: $transitionFast;
// }
// .route-leave-to {
//   // transform: translateY(50px);
//   transform: translate3d(0, 150px, 0);
//   opacity: 0;
// }
</style>

